<template>
  <div class="layout-padding">
    <el-card shadow="hover" :body-style="{ paddingBottom: 0 }">
      <el-form :model="state.tableData.param" label-position="top" ref="queryFormRef" :inline="true"
               label-width="100px">
        <el-row :gutter="20">
          <el-col :span="5">
            <el-form-item label="卡号" prop="cardNo">
              <el-input v-model="state.tableData.param.cardNo" placeholder="请输入卡号" style="width: 100%" @keyup.enter="handleQuery" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="全局钢带编号" prop="globalSteelNo">
              <el-input v-model="state.tableData.param.globalSteelNo" placeholder="请输入全局钢带编号" style="width: 100%" @keyup.enter="handleQuery" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="本班钢带编号" prop="workUnit">
              <el-input v-model="state.tableData.param.shiftSteelNo" placeholder="请输入本班次钢带编号" style="width: 100%"
                        @keyup.enter="handleQuery" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="锚索编号" prop="workPlace">
              <el-input v-model="state.tableData.param.anchorBoltNo" placeholder="请输入锚索编号" style="width: 100%"
                        @keyup.enter="handleQuery" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="压力值" prop="workPlace">
              <el-input v-model="state.tableData.param.pressure" placeholder="请输入压力值" style="width: 100%"
                        @keyup.enter="handleQuery" clearable/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item class="button-group">
          <el-button @click="resetQueryForm()">
            <el-icon>
              <ele-Refresh/>
            </el-icon>
            重置
          </el-button>
          <el-button type="primary" @click="handleQuery">
            <el-icon>
              <ele-Search/>
            </el-icon>
            查询
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
<!--    <el-card shadow="hover" :body-style="{ paddingBottom: 0 }">-->
<!--      <el-form :model="state.tableData.param" label-position="top" ref="queryFormRef" :inline="true"-->
<!--               label-width="100px">-->

<!--        <el-form-item label="卡号" prop="cardNo">-->
<!--          <el-input v-model="state.tableData.param.cardNo" placeholder="请输入卡号" style="width: 200px"-->
<!--                    @keyup.enter="handleQuery" clearable/>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="全局钢带编号" prop="name">-->
<!--          <el-input v-model="state.tableData.param.globalSteelNo" placeholder="请输入全局钢带编号" style="width: 200px"-->
<!--                    @keyup.enter="handleQuery" clearable/>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="本班钢带编号" prop="workUnit">-->
<!--          <el-input v-model="state.tableData.param.shiftSteelNo" placeholder="请输入本班次钢带编号" style="width: 200px"-->
<!--                    @keyup.enter="handleQuery" clearable/>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="锚索编号" prop="workPlace">-->
<!--          <el-input v-model="state.tableData.param.anchorBoltNo" placeholder="请输入锚索编号" style="width: 200px"-->
<!--                    @keyup.enter="handleQuery" clearable/>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="压力值" prop="workPlace">-->
<!--          <el-input v-model="state.tableData.param.pressure" placeholder="请输入压力值" style="width: 200px"-->
<!--                    @keyup.enter="handleQuery" clearable/>-->
<!--        </el-form-item>-->
<!--        <el-form-item class="button-group">-->
<!--          <el-button @click="resetQueryForm()">-->
<!--            <el-icon>-->
<!--              <ele-Refresh/>-->
<!--            </el-icon>-->
<!--            重置-->
<!--          </el-button>-->
<!--          <el-button type="primary" @click="handleQuery">-->
<!--            <el-icon>-->
<!--              <ele-Search/>-->
<!--            </el-icon>-->
<!--            查询-->
<!--          </el-button>-->
<!--        </el-form-item>-->
<!--      </el-form>-->
<!--    </el-card>-->
    <el-card shadow="hover" class="table-card" style="margin-top: 10px">
      <div class="table-container">
        <el-table
            :data="state.tableData.data"
            v-loading="state.tableData.loading"
            style="width: 100%"
            size="default"
            stripe
        >
          <el-table-column prop="cardNo" label="卡号" show-overflow-tooltip></el-table-column>
          <el-table-column prop="globalSteelNo" label="全局钢带编号" show-overflow-tooltip></el-table-column>
          <el-table-column prop="shiftSteelNo" label="本班钢带编号" show-overflow-tooltip></el-table-column>
          <el-table-column prop="anchorBoltNo" label="锚索编号" show-overflow-tooltip></el-table-column>
          <el-table-column prop="pressure" label="压力值" show-overflow-tooltip></el-table-column>
          <el-table-column prop="pressure" label="创建时间" show-overflow-tooltip></el-table-column>
        </el-table>
      </div>

      <div class="pagination-container">
        <el-pagination
            class="pagination-right"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :pager-count="5"
            :page-sizes="[10, 20, 30]"
            v-model:current-page="state.tableData.param.pageNum"
            background
            v-model:page-size="state.tableData.param.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="state.tableData.total"
        ></el-pagination>
      </div>
    </el-card>
  </div>
</template>
<script setup lang="ts" name="systemRole">
import {reactive, onMounted, ref} from 'vue';
import sensorApi from "/@/api/manager/sensor";

// 引入组件

// 定义变量内容
const queryFormRef = ref();
const state = reactive({
  tableData: {
    data: [],
    total: 0,
    loading: false,
    param: {
      pageNum: 1,
      pageSize: 10,
      cardNo: '',
      globalSteelNo: '',
      shiftSteelNo: '',
      anchorBoltNo: '',
      pressure: ''
    },
  },
});

// 页面加载时
onMounted(() => {
  handleQuery();
});

// 重置
const resetQueryForm = () => {
  queryFormRef.value?.resetFields();
  handleQuery();
};

// 初始化表格数据
const handleQuery = () => {
  state.tableData.loading = true;
  sensorApi.query(state.tableData.param).then((res) => {
    state.tableData.data = res.data.list;
    state.tableData.total = res.data.totalCount;
    state.tableData.loading = false;
  });
};


// 分页改变
const handleSizeChange = (val: number) => {
  state.tableData.param.pageSize = val;
  handleQuery();
};

// 分页改变
const handleCurrentChange = (val: number) => {
  state.tableData.param.pageNum = val;
  handleQuery();
};
</script>

<style scoped>


.button-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

.table-card {
  padding: 16px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}

.table-container {
  overflow-x: auto;
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
  padding: 16px;
}

.pagination-right {
  margin-left: auto;
}


</style>

